<!DOCTYPE html>
<html>
<head>
	<title>靓号商城</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/index.css">
	<style type="text/css">[v-cloak]{display: none;}</style>
	<style>
		.search_text.right{
			right:0;left:unset;
		}
	</style>
</head>
<body class="">
<div id="app" v-cloak>
	<div class="head_search pad_usual">
		<div class="region_span">归属地 <img src="img/arr_up.png" class="icon_up" alt=""></div>
		<div class="search_box">
			<input type="text" class="search_input" @focus="searchFocus">
			<span :class="{search_text:true,pos_center:true,right:search_if}">
				搜索<img src="img/search.png" class="icon_search" @click="goSearch" alt="">
			</span>
		</div>
	</div>
	<div class="banner_box">
		<img src="img/banner.png" class="banner_img" alt="">
	</div>
	<div class="line_bg"></div>
	<ul class="logo_box disFlex mt_30h" >
		<li>
			<img src="img/icon_yd.png" class="logo_item" alt="">
			<p>移动选号</p>
		</li>
		<li>
			<img src="img/icon_dx.png" class="logo_item" alt="">
			<p>电信选号</p>
		</li>
		<li>
			<img src="img/icon_lt.png" class="logo_item" alt="">
			<p>联通选号</p>
		</li>
		<li>
			<img src="img/icon_xn.png" class="logo_item" alt="">
			<p>虚拟运营商</p>
		</li>
		<li>
			<img src="img/icon_zj.png" class="logo_item" alt="">
			<p>座机选号</p>
		</li>
	</ul>
	<div class="line_bg mt_30h"></div>
	<div class="pad_usual disFlex notice">
		<span class="icon_logo">
			<img src="img/toutiao.png" alt="">
		</span>
		<span class="flex">
			这是一条神奇的通知消息
		</span>
	</div>
	<div class="line_bg mt_30h"></div>
	<div class="number foot_margin">
		<div class="title">精品号码推荐</div>
		<div class="number_box">
			<div class="number_item" v-for="i in 6" @click="goDtl">
				<div class="number_span">
					<span>139</span> <span>1010</span> <span>2959</span>
				</div>
				<div class="region">
					<span>成都</span><span>移动</span>
				</div>
				<div class="info">
					<span class="red">￥ 100</span> （含话费49元）
				</div>
			</div>
		</div>
	</div>
	<footer>
		<div>
			<img src="img/shop_on.png" class="icon_shop" alt="">
			<p>靓号商城</p>
		</div>
		<div>
			<img src="img/server.png" class="icon_server" alt="">
			<p>微信客服</p>
		</div>
		<div>
			<img src="img/sale.png" class="icon_sale" alt="">
			<p>分销中心</p>
		</div>
		<div @click="goUser">
			<img src="img/user.png" class="icon_user" alt="">
			<p>个人中心</p>
		</div>
	</footer>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/public.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            search_if:false,
		},
        methods: {
            goDtl:function () {
                location.href="detail.html"
            },
            goUser:function () {
				location.href="user.html"
            },
			searchFocus:function () {
				this.search_if=true;
            },
            goSearch:function () {
				location.href="search.html"
            }
        },
        created: function created() {},
        mounted: function mounted() {}
    });

</script>
</body>
</html>